<template>
  <view class="work-order">
    <view class="guess">
      <view
        class="title"
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <view class=""
          ><span style="color: #9d9d99">投诉类型：</span>产品建议</view
        >
        <view class=""
          ><span style="color: #9d9d99">处理状态：</span>处理中</view
        >
      </view>
      <view class="title"
        ><span style="color: #9d9d99">提交时间：</span>2022-07-08 15:30</view
      >
      <view v-show="ishow == true">
        <!-- 商品类显示be -->
        <view
          class="title"
          style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap"
        >
          <span style="color: #9d9d99">商品名称：</span>
          苹果13Pro max 5G手机 全新国行苹果13Pro max 5G手机 全新国行
        </view>
        <!-- 商品类显示en -->
        <!-- 订单类显示be -->
        <view>
          <view
            class="title"
            style="
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            "
          >
            <span style="color: #9d9d99">投诉对象：</span>
            2022070815232323654785202207081523232365478520220708152323236547852022070815232323654785
          </view>
          <view
            class="title"
            style="
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            "
          >
            <span style="color: #9d9d99">产品名称：</span>
            苹果13Pro max 5G手机 全新国行苹果13Pro max 5G手机 全新国行
          </view>
        </view>
        <!-- 订单类显示en -->
        <view class="title" style="display: flex">
          <span style="color: #9d9d99">投诉说明：</span>
          <view class="" style="flex: 1; margin-top: 1rpx; line-height: 56rpx">
            不好用啊巴拉巴拉不好用啊巴拉巴拉小魔仙变身不好用啊巴拉巴拉不好用啊巴拉巴拉小魔仙变身
          </view>
        </view>
        <!-- 订单类显示be -->
        <view class="imgs">
          <view class="imge" v-for="(item, index) in quesson" :key="index">
            <image
              :src="item.text"
              mode="aspectFit"
              style="width: 198rpx; height: 198rpx"
              @click="getImgIndex(index)"
            ></image>
          </view>
        </view>
        <!-- 订单类显示en -->
      </view>
      <u-line length="90%" margin="30rpx 30rpx"></u-line>
      <view class="btn">
        <button
          v-if="moreObj.type == 2"
          @click="chan(1), (ishow = true)"
          class="btmed"
          style="border: 1px solid #157afe; color: #157afe"
        >
          展开<image
            src="../../static/server_mag/downwards.png"
            mode=""
            style="width: 30rpx; height: 14rpx"
          >
          </image>
        </button>
        <button
          v-else
          @click="chan(2), (ishow = false)"
          class="btmed"
          style="border: 1px solid #157afe; color: #157afe"
        >
          收起<image
            src="../../static/server_mag/upward.png"
            mode=""
            style="width: 30rpx; height: 14rpx"
          >
          </image>
        </button>
      </view>
    </view>

    <!-- 	<view class="guess" style="padding-top: 20rpx;">
			<view class="stpes">
				<u-steps :current="0" direction="column" activeIcon="../../static/server_mag/round.png"
					inactiveIcon="../../static/server_mag/rounded.png">
					<u-steps-item v-for="(item,index) in list" :key="index" :title="item.text">
						<template slot="desc">
							<view class="downloadList">
								<view class="">{{item.type}}</view>
								<view style="display: flex;align-items: center;">
									<image src="../../static/server_mag/zjc-icon.png" mode="aspectFit" style="width: 48rpx;height: 34rpx;"></image>
									<text>租机虫</text>
								</view>
								<view style="display: flex;align-items: center;">
									<image src="../../static/server_mag/sto-icon.png" mode="aspectFit" style="width: 48rpx;height: 32rpx;"></image>
									<text style="width:280rpx;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">晟牛U租晟牛U租晟牛U租晟牛U租晟牛U租晟牛U租晟牛U租晟牛U租晟牛U租晟牛U租</text>
								</view>
								<view style="display: flex;align-items: center;">
									<image src="../../static/server_mag/user.png" mode="aspectFit" style="width: 48rpx;height: 34rpx;"></image>
									<text>用户补充</text>
								</view>
							</view>
						</template>
					</u-steps-item>
				</u-steps>
			</view>
		</view> -->

    <view class="guess">
      <view style="display: flex; flex-direction: column; align-items: center">
        <image
          class="default-mg"
          src="../../static/server_mag/not-deak.png"
          mode="aspectFit"
        ></image>
        <view style="margin-top: 20rpx">
          <view class="tear">您的反馈虫虫已收到</view>
          <view class="tear">全力解决中~</view>
        </view>
      </view>
      <view class="tear mtp"
        >等不及了？
        <view style="color: #157afe; display: inline-block; position: relative">
          <view class="contact-list">
            <contact-button
              size="17"
              class="online-btn"
              tnt-inst-id="ilh_9ol2"
              scene="SCE00183004"
            />
            <contact-button
              size="17"
              class="online-btn"
              tnt-inst-id="ilh_9ol2"
              scene="SCE00183004"
            />
            <contact-button
              size="17"
              class="online-btn"
              tnt-inst-id="ilh_9ol2"
              scene="SCE00183004"
            />
            <contact-button
              size="17"
              class="online-btn"
              tnt-inst-id="ilh_9ol2"
              scene="SCE00183004"
            />
            <contact-button
              size="17"
              class="online-btn"
              tnt-inst-id="ilh_9ol2"
              scene="SCE00183004"
            />
          </view>
          联系平台客服
        </view>
      </view>
    </view>

    <u-gap height="10vh" bgColor="#eee"></u-gap>
    <view
      style="
        background-color: #fff;
        position: fixed;
        bottom: 0rpx;
        width: 100vw;
        height: 10vh;
      "
    >
      <!-- <button @click="backout" class="qrbtn">撤销</button> -->
      <view
        style="
          display: flex;
          margin: 6rpx 30rpx 0;
          justify-content: space-between;
        "
      >
        <button @click="wantmore" class="dnoe">
          <image
            src="../../static/server_mag/notg.png"
            mode="aspectFit"
            style="width: 60rpx; height: 36rpx; margin-top: 10rpx"
          ></image
          >未解决
        </button>
        <button @click="finish" class="gnoe">
          <image
            src="../../static/server_mag/goods.png"
            mode="aspectFit"
            style="width: 60rpx; height: 36rpx"
          >
          </image
          >已解决
        </button>
      </view>
    </view>

    <u-popup
      class="tup"
      :show="morespeak"
      :round="10"
      :safeAreaInsetTop="true"
      :closeable="popupData.closeable"
      :closeOnClickOverlay="popupData.closeOnClickOverlay"
      @close="close"
    >
      <view style="height: 35vh; overflow: auto">
        <text
          style="
            display: flex;
            justify-content: center;
            font-size: 32rpx;
            background-color: #fff;
            position: sticky;
            top: 0;
          "
          >补充投诉</text
        >
        <view class="" style="margin: 20rpx 30rpx 0">
          <u-textarea
            placeholder="请描述你具体遇到的问题~"
            v-model="inform.intro"
            maxlength="500"
            height="100"
          >
          </u-textarea>
          <text style="color: red; font-size: 24rpx" v-if="tips == true"
            >内容不能为空！</text
          >
        </view>
        <view
          style="
            background-color: #fff;
            position: fixed;
            bottom: 0rpx;
            width: 100vw;
            height: 10vh;
          "
        >
          <button
            @click="deal"
            :class="{ activer: inform.intro !== '' }"
            class="tjbtn"
          >
            确认
          </button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      quesson: [
        {
          text: "https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/index/123123zhifb.png",
          type: "1",
        },
        {
          text: "https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/index/123123zhifb.png",
          type: "2",
        },
        {
          text: "../../static/server_mag/iphone13_pro.png",
          type: "3",
        },
        {
          text: "../../static/server_mag/iphone13_pro.png",
          type: "4",
        },
      ],
      moreObj: {
        type: 2, // 1-收起, 2-展开
      },
      ishow: false,
      morespeak: false,
      tips: false,
      popupData: {
        closeable: true,
        closeOnClickOverlay: true,
      },
      inform: {
        intro: "",
      },
      list: [
        {
          text: "运输中运输中",
          type: "12:00",
        },
        {
          text: "已出库",
          type: "11:00",
        },
        {
          text: "已下单",
          type: "10:00",
        },
      ],
    };
  },
  onReady() {},
  methods: {
    getImgIndex(index) {
      // console.log('1',index);
      let imgs = this.quesson.map((item) => {
        return item.text;
      });
      // console.log('2',imgs);
      uni.previewImage({
        urls: imgs,
        current: index,
      });
    },
    backout() {
      uni.showToast({
        title: "好耶~虫虫鸡腿保住了",
        icon: "success",
      });
    },
    finish() {
      uni.showToast({
        title: "叮咚~这个难题解决咯",
        icon: "success",
      });
    },
    wantmore() {
      this.morespeak = true;
    },
    deal() {
      if (!this.inform.intro.length) {
        return (this.tips = true);
      } else {
        this.tips = false;
      }
    },
    close() {
      this.morespeak = false;
    },
    chan(v) {
      this.moreObj.type = v;
    },
  },
};
</script>

<style lang="scss" scoped>
.stpes ::v-deep .u-text__value {
  font-size: 32rpx !important;
}

// .stpes ::v-deep .u-steps-item__wrapper{
// 	width: 60rpx !important;
// 	height: 60rpx !important;
// }
// .stpes ::v-deep .u-steps-item__wrapper__circle {
// 	width: 50rpx !important;
// 	height: 50rpx !important;
// }

// .stpes ::v-deep .u-icon__img {
// 	width: 18px !important;
// 	height: 18px !important;
// }

// .stpes ::v-deep .u-steps-item__line {
// 	background-color: #909193 !important;
// 	height: 100% !important;
// }

// .stpes ::v-deep .u-steps-item--column {
// 	padding-bottom: 100rpx;
// }

.work-order {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  box-sizing: border-box;
  overflow: auto;
  .contact-list {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    overflow: hidden;
  }
  .stpes {
    padding: 30rpx 40rpx 0;
    font-size: 20px !important;
  }

  .downloadList {
    display: flex;
    justify-content: space-between;
    font-size: 32rpx;
  }

  .slot-icon {
    width: 21px;
    height: 21px;
    background-color: $u-warning;
    border-radius: 100px;
    font-size: 12px;
    color: #fff;
    line-height: 21px;
    text-align: center;
  }

  .qrbtn {
    background: #157afe;
    color: #fff;
    border-radius: 40rpx;
    width: 90vw;
    height: 90rpx;
    margin: 0 auto;
  }

  .tjbtn {
    background: #cececc;
    color: #fff;
    border-radius: 40rpx;
    width: 90vw;
    height: 90rpx;
    margin: 0 auto;
  }

  .activer {
    background: #157afe;
  }

  .dnoe {
    background: #fff;
    width: 263rpx;
    border-radius: 40rpx;
    border: 1px solid #c9c9c9;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gnoe {
    font-size: 32rpx;
    width: 400rpx;
    background: linear-gradient(
      282deg,
      #157afe 1%,
      #157afe 1%,
      #66a8ff 100%,
      #66a8ff 100%
    );
    color: #fff;
    border-radius: 40rpx;
    border: 1px solid #157afe;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .guess {
    background-color: #fff;
    margin: 30rpx 32rpx;
    border-radius: 20rpx;

    .title {
      font-size: 30rpx;
      font-weight: 500;
      padding: 30rpx 32rpx 0;
    }

    .default-mg {
      width: 305rpx;
      height: 185rpx;
      margin: 0 auto;
    }

    .tear {
      text-align: center;
      color: #3d3d3d;
      font-size: 28rpx;
      padding: 16rpx 0 0;
      font-family: PingFang SC Medium;
    }

    .mtp {
      margin-top: 60rpx;
      padding-bottom: 40rpx;
    }

    .imgs {
      padding: 20rpx 32rpx 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;
    }

    .btn {
      display: flex;
      justify-content: center;
      padding: 0rpx 0 30rpx;

      .btmed {
        border-radius: 40rpx;
        font-size: 30rpx;
        width: 160rpx;
        height: 70rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
